<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram</title>
</head>
<body>
    <canvas id="circuitCanvas" width="500" height="350" style="border:1px solid #000000;"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;

        // --- Draw Wires ---

        // Top horizontal wires
        ctx.beginPath();
        ctx.moveTo(100, 50);
        ctx.lineTo(240, 50); // To negative terminal of battery
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(260, 50);
        ctx.lineTo(400, 50); // From positive terminal of battery
        ctx.stroke();

        // Right vertical wire
        ctx.beginPath();
        ctx.moveTo(400, 50);
        ctx.lineTo(400, 250);
        ctx.stroke();

        // Left vertical wire segment for switch
        ctx.beginPath();
        ctx.moveTo(100, 50);
        ctx.lineTo(100, 100); // Down to point X
        ctx.stroke();

        // Middle horizontal wires (Capacitor A branch)
        ctx.beginPath();
        ctx.moveTo(150, 150); // From point S
        ctx.lineTo(230, 150);
        ctx.stroke();
        
        ctx.beginPath();
        ctx.moveTo(270, 150);
        ctx.lineTo(400, 150);
        ctx.stroke();

        // Bottom horizontal wires (Capacitor B branch)
        ctx.beginPath();
        ctx.moveTo(100, 250); // From point Y
        ctx.lineTo(230, 250);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(270, 250);
        ctx.lineTo(400, 250);
        ctx.stroke();

        // --- Draw Components ---

        // Battery
        ctx.beginPath();
        ctx.moveTo(240, 40); // Short line (negative terminal)
        ctx.lineTo(240, 60);
        ctx.stroke();
        
        ctx.beginPath();
        ctx.moveTo(260, 30); // Long line (positive terminal)
        ctx.lineTo(260, 70);
        ctx.stroke();

        // Switch S
        ctx.beginPath();
        ctx.moveTo(100, 100); // Point X
        ctx.lineTo(150, 150); // Point S
        ctx.stroke();
        
        // Capacitor A
        ctx.beginPath();
        ctx.moveTo(230, 130);
        ctx.lineTo(230, 170);
        ctx.stroke();
        
        ctx.beginPath();
        ctx.moveTo(270, 130);
        ctx.lineTo(270, 170);
        ctx.stroke();

        // Capacitor B
        ctx.beginPath();
        ctx.moveTo(230, 230);
        ctx.lineTo(230, 270);
        ctx.stroke();
        
        ctx.beginPath();
        ctx.moveTo(270, 230);
        ctx.lineTo(270, 270);
        ctx.stroke();

        // --- Draw Points/Junctions (filled circles) ---
        ctx.fillStyle = 'black';
        
        // Point X
        ctx.beginPath();
        ctx.arc(100, 100, 3, 0, 2 * Math.PI);
        ctx.fill();

        // Point S
        ctx.beginPath();
        ctx.arc(150, 150, 3, 0, 2 * Math.PI);
        ctx.fill();

        // Point Y
        ctx.beginPath();
        ctx.arc(100, 250, 3, 0, 2 * Math.PI);
        ctx.fill();

        // Junction on the right
        ctx.beginPath();
        ctx.arc(400, 150, 3, 0, 2 * Math.PI);
        ctx.fill();

        // --- Draw Labels ---
        ctx.font = 'bold 20px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        ctx.fillText('X', 80, 100);
        ctx.fillText('S', 150, 168);
        ctx.fillText('Y', 80, 250);

        ctx.font = '20px Arial';
        ctx.textBaseline = 'bottom';
        ctx.fillText('A', 250, 125);
        ctx.fillText('B', 250, 225);

        ctx.font = 'bold 22px Arial';
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 5.1', 250, 330);

    </script>
</body>
</html>